<template>
  <div>
    <div class="containera">
      <el-form ref="form" :model="form" label-width="200px">
        <el-form-item label="LOGO:">
          <div v-if="seen">
            <el-upload
              ref="upload"
              action="#"
              accept="image/png,image/gif,image/jpg,image/jpeg"
              list-type="picture"
              :limit="1"
              :auto-upload="false"
              :before-upload="handleBeforeUpload"
              :on-change="handleChange"
              :on-remove="handleRemove"
              :file-list="listarr"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <my-cropper
              ref="myCropper"
              @getFile="getFile"
              @upAgain="upAgain"
            ></my-cropper>
          </div>
          <div v-else>
            <img :src="localhostPath + form.logoPath" alt="" />
          </div>
        </el-form-item>
        <el-form-item label="公司地址:" prop="webAddress">
          <el-input
            type="input"
            v-model="form.webAddress"
            v-if="seen"
          ></el-input>
          <span v-else>{{ form.webAddress }}</span>
        </el-form-item>
        <el-form-item label="商城名称:" prop="emporiumName">
          <el-input
            type="input"
            v-model="form.emporiumName"
            v-if="seen"
          ></el-input>
          <span v-else>{{ form.emporiumName }}</span>
        </el-form-item>
        <el-form-item label="ICP:" prop="icp">
          <el-input type="input" v-model="form.icp" v-if="seen"></el-input>
          <span v-else>{{ form.icp }}</span>
        </el-form-item>
        <el-form-item label="公安备案号:" prop="policeRecord">
          <el-input
            type="input"
            v-model="form.policeRecord"
            v-if="seen"
          ></el-input>
          <span v-else>{{ form.policeRecord }}</span>
        </el-form-item>
        <el-form-item label="版权所有:" prop="copyrigh">
          <el-input type="input" v-model="form.copyrigh" v-if="seen"></el-input>
          <span v-else>{{ form.copyrigh }}</span>
        </el-form-item>
        <el-form-item label="电话:" prop="telephone">
          <el-input
            type="input"
            v-model="form.telephone"
            v-if="seen"
          ></el-input>
          <span v-else>{{ form.telephone }}</span>
        </el-form-item>
        <el-form-item label="邮箱:" prop="dzyx">
          <el-input type="email" v-model="form.dzyx" v-if="seen"></el-input>
          <span v-else>{{ form.dzyx }}</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="edit" v-if="!seen"> 编辑</el-button>
          <span v-else>
            <el-button type="primary" @click="cancle()">取消</el-button>
            <el-button type="primary" @click="save()">保存</el-button>
          </span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import MyCropper from "../../components/cropper.vue";
import { addWebInfo, getWebInfo } from "../../api/web";
import common from "../../utils/common";

export default {
  components: { MyCropper },

  data() {
    return {
      localhostPath: common.localhostPath,
      form: {
        id: 0,
        //地址
        webAddress: " ",
        //商城名称
        emporiumName: " ",
        //ICP
        icp: " ",
        //公安备案号
        policeRecord: " ",
        copyright: "",
        telephone: " ",
        dzyx: " ",
        logoPath: "",
      },
      seen: false,
      listarr: [],
      // rules: {
      //   webAddress: [
      //     { required: true, message: "请输入网站地址", trigger: "blur" },
      //   ],
      //   webName: [
      //     { required: true, message: "请输入网站名称", trigger: "blur" },
      //   ],
      //   icp: [{ required: true, message: "请输入ICP", trigger: "blur" }],
      //   policeRecord: [
      //     { required: true, message: "请输入公安备案号", trigger: "blur" },
      //   ],
      //   telephone: [{ required: true, message: "请输入电话", trigger: "blur" }],
      //   email: [
      //     { required: true, message: "请输入邮箱地址", trigger: "blur" },
      //     {
      //       type: "email",
      //       message: "请输入正确的邮箱地址",
      //       trigger: ["blur", "change"],
      //     },
      //   ],
      //   copyright:[{ required: true, message: "请输入相关信息", trigger: "blur" }],
      // },
    };
  },
  mounted() {
    getWebInfo().then(({ data }) => {
      if (data.code == 200) {
        this.form = data.data;
        console.log(data.data);
      }
    });
  },
  methods: {
    edit() {
      this.seen = !this.seen;
      if (this.form.id == 0) {
        localStorage.setItem("oId", 0);
      } else {
        localStorage.setItem("oId", this.form.id);
      }
    },
    //上传
    handleRemove() {
      this.listarr = [];
    },
    handleBeforeUpload(file) {
      console.log("before");
      if (
        !(
          file.type === "image/png" ||
          file.type === "image/gif" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg"
        )
      ) {
        this.$notify.warning({
          title: "警告",
          message:
            "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
        });
      }
      let size = file.size / 1024 / 1024 / 2;
      if (size > 2) {
        this.$notify.warning({
          title: "警告",
          message: "图片大小必须小于2M",
        });
      }
    },
    handleChange(file) {
      // if (fileList.length > 0) {
      //   this.form.listarr = [fileList[fileList.length - 1]];
      // }
      this.handleCrop(file);
    },
    //上传图片触发
    handleCrop(file) {
      this.$nextTick(() => {
        this.$refs.myCropper.open(file.raw || file, 200, 150, 3, 2);
      });
    },
    // 点击弹框重新时触发
    upAgain() {
      this.$refs["upload"].$refs["upload-inner"].handleClick();
    },
    // 获取裁剪后的图片
    getFile(file) {
      this.$nextTick(() => {
        this.$refs.myCropper.close();
      });
      var url = window.URL.createObjectURL(file);
      this.listarr.push({ name: file.name, url: url, file: file });
      console.log(this.listarr);
    },
    save() {
      var id = localStorage.getItem("oId");
      if (this.listarr.length == 0) {
        this.$message.error("请上传图片")
      } else {
        const fileObj = this.listarr[0].file;
        const form1 = new FormData();
        form1.append("imageFile", fileObj);
        form1.append("webAddress", this.form.webAddress);
        form1.append("emporiumName", this.form.emporiumName);
        form1.append("icp", this.form.icp);
        form1.append("policeRecord", this.form.policeRecord);
        form1.append("copyright", this.form.copyrigh);
        form1.append("telephone", this.form.telephone);
        form1.append("dzyx", this.form.dzyx);

        addWebInfo(id, form1).then(({ data }) => {
          this.form = data.data;
        });

        this.seen = false;
      }
    },
    cancle() {
      this.seen = false;
    },
  },
};
</script>

<style scoped>
.containera {
  width: 600px;
  margin: auto;
  /* display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  margin-top: 2rem;
}
</style>